<!-- 注册个人或者企业选择 -->
<template>
  <view>
    <u-swiper
      :list="dataList"
      keyName="image"
      :height="swiperHeight + 'px'"
      imgMode="aspectFit"
      showTitle
      :autoplay="false"
      circular
    ></u-swiper>
    <view class="recharge-popup">
      <view class="recharge-options">
        <view
          class="recharge-item"
          :class="{ active: indexId == index }"
          @click="handleRecharge(index)"
          v-for="(item, index) in options"
          :key="index"
        >
          <view class="amount">{{ item.label }}</view>
          <view class="bonus">{{ item.subLabel }}</view>
        </view>
      </view>
      <view class="custom-amount">
        <view style="margin: 30rpx"></view>
        <u-button type="primary" @click="handleCustomRecharge(indexId)"
          >确认</u-button
        >
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, defineEmits } from "vue";
import { getBanner } from "@/api/userInfo.js";
import { onShow, onLoad } from "@dcloudio/uni-app";
const options = [
  { label: "个人", subLabel: "注册个人" },
  { label: "企业", subLabel: "注册企业" },
];
const dataList = ref();
const indexId = ref(0);
const handleRecharge = (index) => {
  indexId.value = index;
};

const handleCustomRecharge = (e) => {
  uni.navigateTo({
    url: `/pages/user/xieyi?type=${e}`,
  });
};
const swiperHeight = ref("");
onShow(async () => {
  await init();
});

const init = async () => {
  try {
    const systemInfo = uni.getSystemInfoSync();
    const screenWidth = systemInfo.windowWidth;
    swiperHeight.value = screenWidth * 0.4875; // 按比例计算高度
    const res = await getBanner("1");
    dataList.value = res.data.map((item) => ({
      image: item.img_show,
      id: item.id,
      title: item.title,
      type: "image",
    }));
  } catch (error) {}
};
</script>

<style lang="scss" scoped>
.recharge-popup {
  margin-top: 35%;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;

  .recharge-options {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30rpx;
    margin-bottom: 40rpx;

    .recharge-item {
      padding: 20rpx;
      border: 2rpx solid #e0e0e0;
      border-radius: 10rpx;
      text-align: center;
      transition: all 0.3s;

      &.active {
        border-color: #2979ff;
        background-color: #f0f7ff;
        transform: scale(1.05);
        box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);
      }

      .amount {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }

      .bonus {
        font-size: 24rpx;
        color: #ff6a00;
        margin-top: 5rpx;
      }
    }
  }

  .custom-amount {
    margin: 30rpx;
  }
}
</style>
